<template>
  <el-dialog
    title="确认删除"
    v-model="isDeleteDialogVisible"
    @close="$emit('cancel')"
  >
    <p>确定要删除员工 "{{ employee.name }}" 吗？</p>
    <template #footer>
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="danger" @click="$emit('confirm')">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  employee: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['confirm', 'cancel']);

const isDeleteDialogVisible = ref(true);

watch(() => props.employee, () => {
  isDeleteDialogVisible.value = true;
});
</script>